<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>搜索</title>
	<link rel="stylesheet" type="text/css" href="semantic/css/semantic.min.css">
	<style type="text/css">
		html,body {
			width:100%;
			height:100%;
			padding: 0px;
			margin: 0px;
		}

		#search {
			width:400px;
			position: relative;
			height:34px;
			top:10px;
			margin: 0px auto;
		}

		#search input {
			border:none;
			height: 32px;
			width: 168px;
			position: absolute;
			top:0px;
			right:32px;
			padding:4px 10px;
			border-left: 1px #d1d2d4 solid;
			border-top: 1px #d1d2d4 solid;
			border-bottom: 1px #d1d2d4 solid;
			border-top-left-radius: 15px;
			border-bottom-left-radius: 15px; 
			outline: none;
		    -webkit-transition: all 0.3s ease;
		    -moz-transition: all 0.3s ease;
		    -ms-transition: all 0.3s ease;
		    -o-transition: all 0.3s ease;
		    transition: all 0.3s ease;
		}

		#search input:focus, #search input:focus + .search_button {
			border-color: #009f5d;
		}

		#search .search_button {
			padding:0px;
			width:32px;
			height:32px;
			border:none;
			position: absolute;
			top:0px;
			right:0px;
			border-right: 1px #d1d2d4 solid;
			border-top: 1px #d1d2d4 solid;
			border-bottom: 1px #d1d2d4 solid;
			background: white;
			border-top-right-radius: 15px;
			border-bottom-right-radius: 15px; 
			outline: none;
			-webkit-transition: all 0.3s ease;
		    -moz-transition: all 0.3s ease;
		    -ms-transition: all 0.3s ease;
		    -o-transition: all 0.3s ease;
		    transition: all 0.3s ease;
		}

		#search .search_button i {
			color:#aaa;
		    -webkit-transition: all 0.3s ease;
		    -moz-transition: all 0.3s ease;
		    -ms-transition: all 0.3s ease;
		    -o-transition: all 0.3s ease;
		    transition: all 0.3s ease;
		}

		#search .search_button i:hover {
			color:#009f5d;
		}
	</style>
</head>
<body>
<div id="search" v-on:contextmenu="contextmenu">
	<input type="text" name="search" v-on:blur="blur" v-on:mouseover="mouseover" v-model="q" placeholder="Search..." v-bind:style="searchWidth" />
	<button class="search_button">
		<i class="search icon"></i>
	</button>
</div>
</body>
<script type="text/javascript" src="semantic/js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el : '#search',
		data : {
			q : "",
			searchWidth : {}
		},
		methods : {
			mouseover : function() {
				document.querySelector("#search input").focus();
				this.searchWidth = {
					width:368+'px'
				}
			},
			blur : function() {
				this.searchWidth = {
					width:168+'px'
				}
			}
		}
	})
</script>
</html>